$f: 19.2;
body{
  background: #EDEDED;
}
.home {
  position: relative;
  width: 100%;

  img{
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
  }
  .common_bg{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    object-fit: cover;
  }

  .dialog {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .6);
    display: none;
    z-index: 1003;

    .close {
      position: absolute;
      right: 5%;
      top: 5%;
      cursor: pointer;
      z-index: 100;

      img {
        width: 30/$f+vw;
      }
    }

    .content {
      width: 100%;

      video {
        width: 80%;
        height: 80vh;
        object-fit: cover;
        display: block;
        margin: 0 auto;
      }
    }
  }

  .banner{
    position: relative;
    video{
      width: 100%;
      height: 100vh;
      object-fit: cover;
      border-radius: 0px 0px 100/$f+vw 100/$f+vw;
    }
    .text{
      position: absolute;
      left: 170/$f+vw;
      bottom:98/$f+vw;
      .t1{
        color: #FFF;
        font-size: 70/$f+vw;
        line-height: 1.5;
        text-transform: capitalize;
        margin-bottom: 16/$f+vw;
      }
      .btn{
        padding: 11/$f+vw 32/$f+vw 12/$f+vw 32/$f+vw;
        border-radius: 52/$f+vw;
        font-weight: 600;
        text-transform: capitalize;
        font-size: 18/$f+vw;
        background: #2932E1;
        color:white;
        transition: all 600ms;
        &:hover{
          background: #000;
        }
      }
    }
  }

  .section0{
    height: 100vh;
    position: relative;
    .fix{
      height: 100vh;
      position: sticky;
      position: -webkit-sticky;
      top: 0;
      display: flex;
      align-items: center;
      overflow: hidden;
      .wrap{
        width: 1580/$f+vw;
        margin: auto;
        position: relative;
        .button{
          position: absolute;
          top: 52%;
          left: 2%;
          width: 1516/$f+vw;
          display: flex;
          justify-content: space-between;
          pointer-events: none;
          border-radius: 50%;
          z-index: 5;
          .circle{
            width: 42/$f+vw;
            height: 42/$f+vw;
            background: rgba(0,0,0,.3);
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: auto;
            cursor: pointer;
            transition: .6s ease;
            border-radius: 50%;
            &:first-child{
              transform: rotate(-180deg);
            }
            &:hover{
              background: #000;
            }
            svg{
              width: 25/$f+vw;
              height: 25/$f+vw;
            }
          }
        }
        .title{
          color: #000;
          font-size: 64/$f+vw;
          font-style: normal;
          font-weight: 600;
          line-height: normal;
          text-transform: capitalize;
          text-align: center;
        }
        .content{
          width: max-content;
          display: flex;
          position: relative;
          z-index: 1;
          margin: 120/$f+vw 0 0 0;
          .item{
            display: flex;
            &:not(:last-child) {
              margin: 0 150/$f+vw 0 0;
            }
            .l{
              .tran{
                margin: 0 0 0 87/$f+vw;
                .p1{
                  color: #000;
                  font-size: 36/$f+vw;
                  font-style: normal;
                  font-weight: 600;
                  line-height: normal;
                  text-transform: capitalize;
                }
                .pick{
                  width: 510/$f+vw;
                  color: #000;
                  // text-align: justify;
                  font-size: 18/$f+vw;
                  font-style: normal;
                  font-weight: 400;
                  line-height: 27/$f+vw; /* 150% */
                  text-transform: capitalize;
                  margin: 0 0 64/$f+vw;
                }
              }
              .eng{
                color: #FFF;
                font-size: 300/$f+vw;
                font-style: normal;
                font-weight: 600;
                line-height: normal;
                text-transform: capitalize;
                pointer-events: none;
              }
            }
            .r{
              width: 586/$f+vw;
              height: 569/$f+vw;
              position: relative;
              canvas{
                width: 100%;
                height: 100%;
              }
              img{
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                opacity: 0;
                &.on{
                  opacity: 1;
                }
              }
            }
          }
        }
      }
    }
  }

  .section1{
    padding: 240/$f+vw 0 52/$f+vw 0;
    .wrap{
      width: 1580/$f+vw;
      height: 900/$f+vw;
      margin: auto;
      position: relative;
      z-index: 2;
      padding: 201/$f+vw 70/$f+vw;
      border-radius: 60/$f+vw;
      overflow: hidden;
      h1{
        color: #FFF;
        font-size: 64/$f+vw;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        text-transform: capitalize;
        margin: 0;
      }
      .p1{
        color: #FFF;
        font-size: 36/$f+vw;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        text-transform: capitalize;
        margin: 0 0 51/$f+vw;
      }
      .p2{
        width: 885/$f+vw;
        color: #FFF;
        // text-align: justify;
        font-size: 18/$f+vw;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-transform: capitalize;
      }
    }
  }

  .section2{
    padding: 100/$f+vw 0 96/$f+vw 0;
    .title{
      color: #000;
      font-size: 64/$f+vw;
      font-style: normal;
      font-weight: 600;
      line-height: normal;
      text-transform: capitalize;
      margin: 0 0 88/$f+vw;
      text-align: center;
    }
    .headline{
      width: 1580/$f+vw;
      color: #000;
      font-size: 18/$f+vw;
      font-style: normal;
      font-weight: 600;
      line-height: normal;
      text-transform: capitalize;
      margin: 0 auto 31/$f+vw;
    }
    .content{
      width: 1580/$f+vw;
      height: 760/$f+vw;
      border-radius: 60/$f+vw;
      background: #FFFEFE;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 65/$f+vw 70/$f+vw 67/$f+vw 175/$f+vw;
      margin: auto;
      .img{
        width: 586/$f+vw;
        height: 569/$f+vw;
        img{
          width: 100%;
          object-fit: contain;
          display:none;
          &.on{
            display: block;
            animation: yAnimate .6s ease forwards;
          }
        }
        @keyframes yAnimate {
          0%{
            transform: translateY(10px);
            opacity: 0;
          }
          100%{
            transform: translateY(0);
            opacity: 1;
          }
        }
      }
      .con_jump{
        position: relative;
        .button{
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%,-50%);
          width: 655/$f+vw;
          display: flex;
          justify-content: space-between;
          pointer-events: none;
          z-index: 5;
          img{
            cursor: pointer;
            pointer-events: auto;
            transition: .3s ease;
            &:first-child{
              transform: rotate(-180deg);
            }
          }
          .swiper-button-disabled{
            opacity: 0;
            pointer-events: none!important;
          }
        }
        .conSwiper{
          width: 539/$f+vw;
          position: relative;

          .swiper-wrapper{
            .swiper-slide{
              .matter{
                &:not(:last-child) {
                  margin: 0 0 20/$f+vw;
                }
                .p1{
                  color: #000;
                  font-size: 18/$f+vw;
                  font-style: normal;
                  font-weight: 600;
                  line-height: normal;
                  text-transform: capitalize;
                  margin: 0 0 9/$f+vw;
                }
                .dis{
                  display: flex;
                  justify-content: space-between;
                  flex-wrap: wrap;
                  gap: 15/$f+vw 0;
                  &.top_screen{
                    .item{
                      width: 170/$f+vw;
                      height: 40/$f+vw;
                      position: relative;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      padding: 0;
                      &.on{
                        img{
                          &:first-child{
                            opacity: 0;
                          }
                          &:nth-child(2) {
                            opacity: 1;
                          }
                        }
                      }
                      &.on{
                        .it_line{
                          background: #fff;
                        }
                      }
                      .it_line{
                        width: 164.562/$f+vw;
                        height: 1px;
                        transform: rotate(-9.102deg);
                        background: #333;
                        transition: .3s ease;
                      }
                      img{
                        transition: .6s ease;
                        object-fit: contain;
                        width: 158/$f+vw;
                        height: 30/$f+vw;

                        &:nth-child(2) {
                          position: absolute;
                          opacity: 0;
                        }
                      }
                    }
                  }
                  .item{
                    width: 260/$f+vw;
                    min-height: 40/$f+vw;
                    padding: 8/$f+vw 0;
                    border-radius: 25/$f+vw;
                    border: 1px solid #DDD;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #000;
                    font-size: 18/$f+vw;
                    font-style: normal;
                    font-weight: 600;
                    line-height: normal;
                    text-transform: capitalize;
                    transition: .6s ease;
                    text-align: center;
                    cursor: pointer;
                    &.all{
                      width: 100%;
                    }
                    &.on{
                      border: 1px solid transparent;
                      color: #fff;
                      background: #000;
                    }
                  }
                }
              }
            }
          }
        }
      }

    }
  }

  .section3{
    padding: 0 0 86/$f+vw;
    margin: 0 170/$f+vw ;
    overflow: hidden;
    .title{
      color: #000;
      font-size: 18/$f+vw;
      font-style: normal;
      font-weight: 600;
      line-height: normal;
      text-transform: capitalize;
      margin: 0 0 31/$f+vw;
    }
    .content{
      .keySwiper{
        width: 1982/$f+vw;
        margin: 0;
        .swiper-wrapper{
          .swiper-slide{
            width: 100%;
            height: 410/$f+vw;
            border-radius: 40/$f+vw;
            background: #FAFAFA;
            padding: 40/$f+vw 0 0 0;
            &:hover{
              .img{
                .pic{
                  opacity: 0;
                }
                .video{
                  display: block;
                }
              }
              .text{
                transform: translateY(0);
                .more{
                  opacity: 1;
                }
              }
            }
            .img{
              width: 100%;
              height: 247/$f+vw;
              position: relative;
              .pic{
                width: 100%;
                height: 100%;
                transition: .5s ease;
              }
              .video{
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                display: none;
                transition: .5s ease;
                object-fit: cover;
              }
            }
            .text{
              margin: 10/$f+vw 10/$f+vw 0 33/$f+vw;
              position: absolute;
              bottom: 26/$f+vw;
              transform: translateY(50/$f+vw);
              transition: .3s ease;
              .p1{
                color: #000;
                font-size: 26/$f+vw;
                font-style: normal;
                font-weight: 600;
                line-height: normal;
                text-transform: capitalize;
                margin: 0 0 10/$f+vw;
              }
              .more{
                width: 94/$f+vw;
                height: 41/$f+vw;
                border-radius: 52/$f+vw;
                background: #2932E1;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #FFF;
                font-size: 18/$f+vw;
                font-style: normal;
                font-weight: 600;
                line-height: normal;
                text-transform: capitalize;
                opacity: 0;
                transition: .3s ease;
              }
            }
          }
        }
      }
      .swiper-pagination{
        width: 100%;
        height: 8/$f+vw;
        position: static;
        border-radius: 43/$f+vw;
        background: #FFF;
        margin: 48/$f+vw 0 0 0;
        overflow: hidden;
        .swiper-pagination-progressbar-fill{
          background: #000;
        }
      }
    }
  }

  .section4{
    position: relative;
    padding: 86/$f+vw 0 100/$f+vw 0;
    margin: 0 170/$f+vw;
    .title{
      color: #000;
      font-size: 18/$f+vw;
      font-style: normal;
      font-weight: 600;
      line-height: normal;
      text-transform: capitalize;
      margin: 0 0 28/$f+vw;
    }
    .content{
      width: 780/$f+vw;
      height: 500/$f+vw;
      border-radius: 60/$f+vw;
      overflow: hidden;
      position: relative;
      z-index: 5;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: auto;
      .play{
        width: 60/$f+vw;
        height: 60/$f+vw;
        border-radius: 50%;
        background: #2932E1;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        opacity: 0;
        transition: all 600ms;
        svg{
          width: 23/$f+vw;
          height: 23/$f+vw;
        }
      }
    }
  }

  .section5{
    border-radius: 60/$f+vw;
    background: #D5D5D5;
    padding: 108/$f+vw 0 110/$f+vw 0;
    .title{
      color: #000;
      font-size: 64/$f+vw;
      font-style: normal;
      font-weight: 600;
      line-height: normal;
      text-transform: capitalize;
      text-align: center;
    }
    .content{
      margin: 44/$f+vw 170/$f+vw 0 170/$f+vw;
      display: flex;
      justify-content: space-between;
      .item{
        width: 370/$f+vw;
        height: 608/$f+vw;
        border-radius: 40/$f+vw;
        position: relative;
        overflow: hidden;
        &:hover{
          .img{
            transform: scale(1.05);
            &:first-child{
              opacity: 0;
            }
          }
          .img2{
            opacity: 1;
          }
        }
        .img{
          width: 100%;
          height: 100%;
          transition: .6s ease;
        }
        .img2{
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          opacity: 0;
        }

        .position{
          position: absolute;
          bottom: 37/$f+vw;
          left: 38/$f+vw;
          .icon{
            width: 60/$f+vw;
            height: 60/$f+vw;
            display: flex;
            align-items: center;
            justify-content: center;
            svg{
              max-width: 100%;
              max-height: 100%;
            }
          }
          .text{
            color: #FFF;
            font-size: 36/$f+vw;
            font-style: normal;
            height: 60/$f+vw;
            display: flex;
            align-items: center;
            justify-content: center;
            // font-weight: 600;
            margin-top: 3/$f+vw;
            line-height: 30/$f+vw; /* 83.333% */
            text-transform: capitalize;
          }
        }
      }
    }
  }

  .section6{
    padding: 106/$f+vw 0 100/$f+vw 0;
    margin: 0 170/$f+vw;
    .title{
      color: #000;
      font-size: 18/$f+vw;
      font-style: normal;
      font-weight: 600;
      line-height: normal;
      text-transform: capitalize;
      margin: 0 0 36/$f+vw;
    }
    .content{
      position: relative;
      .next{
        width: 42/$f+vw;
        height: 42/$f+vw;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: -106/$f+vw;
        z-index: 2;
        cursor: pointer;
        background: #000;
        svg{
          width: 22/$f+vw;
          height: 22/$f+vw;
        }
      }
      .techSwiper{
        width: 100%;
        .swiper-slide{
          .fist{
            display: flex;
            justify-content: space-between;
            padding: 0 0 36/$f+vw;
            margin: 0 0 30/$f+vw;
            border-bottom: 1px solid #000;
            .matter{
              width: 765/$f+vw;
              h1{
                color: #000;
                font-size: 64/$f+vw;
                font-style: normal;
                font-weight: 600;
                line-height: normal;
                text-transform: capitalize;
                margin: 0 0 41/$f+vw;
              }
              .p1{
                color: #000;
                font-size: 18/$f+vw;
                font-style: normal;
                font-weight: 600;
                line-height: normal;
                text-transform: capitalize;
                margin: 0 0 36/$f+vw;
              }
              table{
                width: 100%;
                tr{
                  td{
                    height: 50/$f+vw;
                    border-bottom: 1px solid #D5D5D5;
                    color: #000;
                    font-size: 18/$f+vw;
                    font-style: normal;
                    font-weight: 600;
                    text-transform: capitalize;
                  }
                }
              }
            }
          }
          .last{
            display: flex;
            justify-content: space-between;
            .button{
              width: 765/$f+vw;
              display: flex;
              flex-wrap: wrap;
              gap: 20/$f+vw 30/$f+vw;
                  height: fit-content;

              .more{
                width: fit-content;
                height: 47/$f+vw;
                border-radius: 52/$f+vw;
                border: 1px solid #000;
                padding: 0 25/$f+vw;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #000;
                font-size: 18/$f+vw;
                font-style: normal;
                font-weight: 600;
                line-height: normal;
                text-transform: capitalize;
                transition: .6s ease;
                &:hover{
                  background: #000;
                  color: #fff;
                }
              }
            }
          }
        }
      }
    }
  }

  .section7{
    padding: 100/$f+vw 0 160/$f+vw 0;
    margin: 0 170/$f+vw;
    border-radius: 60/$f+vw;
    overflow: hidden;
    .content{
      width: 100%;
      height: 548/$f+vw;
      border-radius: 60/$f+vw;
      overflow: hidden;
      display: flex;
      .img{
        width: 607/$f+vw;
        height: 100%;
        overflow: hidden;
        &:hover{
          img{
            transform: scale(1.05);
          }
        }
        img{
          width: 100%;
          height: 100%;
          transition: .6s ease;
        }
      }
      .color{
        width: 973/$f+vw;
        height: 100%;
        background: #D5D5D5;
        padding: 86/$f+vw 93/$f+vw 0 81/$f+vw;
        h1{
          color: #000;
          font-size: 64/$f+vw;
          font-style: normal;
          font-weight: 600;
          line-height: 60/$f+vw; /* 93.75% */
          text-transform: capitalize;
          margin: 0 0 25/$f+vw;
        }
        .pick{
          color: #000;
          // text-align: justify;
          font-size: 18/$f+vw;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
          text-transform: capitalize;
          margin: 0 0 46/$f+vw;
        }
        .more{
          width: 173/$f+vw;
          height: 47/$f+vw;
          border-radius: 52/$f+vw;
          background: #2932E1;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #FFF;
          font-size: 18/$f+vw;
          font-style: normal;
          font-weight: 600;
          line-height: normal;
          text-transform: capitalize;
          transition: .6s ease;
          &:hover{
            background: #000;
          }
        }
      }
    }

  }

  .fixed_alert{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 999;
    display: flex;
    justify-content: flex-end;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: .6s;
    &.on{
      opacity: 1;
      pointer-events: auto;
      .content{
        transform: translateX(0);
      }
    }
    .mask_{
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      opacity: 0.5;
      background: #000;
    }
    .content{
      width: 1640px;
      height: 100%;
      display: flex;
      justify-content: space-between;
      padding: 65px 139px 0 0;
      background: #EDEDED;
      position: relative;
      z-index: 4;
      transform: translateX(100%);
      transition: .6s;
      .l{
        .move{
          margin: 0 0 0 65px;
          .back{
            width: 42px;
            height: 42px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            margin: 0 0 38px;
            background: #D9D9D9;
            cursor: pointer;
            transition: .6s ease;
            &:hover{
              background: #2932E1;
              svg{
                path{
                  fill: #fff;
                }
              }
            }
            svg{
              width: 25px;
              height: 25px;
              path{
                transition: .6s ease;

              }
            }
          }
          .title{
            color: #000;
            font-size: 64px;
            font-style: normal;
            font-weight: 600;
            line-height: 60px; /* 93.75% */
            text-transform: capitalize;
          }
          .pic{
            margin: 211px 0 0 15px;
            width: 503px;
            position: relative;
            z-index: 4;

            img{
              width: 100%;
            }
          }
        }
        .position{
          width: 664px;
          position: absolute;
          left: 0;
          bottom: -51px;
        }
      }
      .r{
        width: 740px;
        margin: 73px 0 0 0;
        .jump{
          .index_con{
            .p1{
              color: #000;
              font-size: 26px;
              font-style: normal;
              font-weight: 400;
              line-height: normal;
              text-transform: capitalize;
              margin: 0 0 16px;
            }
            .pick{
              color: #000;
              // text-align: justify;
              font-size: 18px;
              font-style: normal;
              font-weight: 400;
              line-height: normal;
              text-transform: capitalize;
            }
            .bottom{
              margin: 239px 0 0 0;
              .p1{
                color: #000;
                font-size: 26px;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
                text-transform: capitalize;
              }
              .dis{
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                gap: 24px 0;
                .list{
                  width: 340px;
                  color: #000;
                  font-size: 18px;
                  font-style: normal;
                  font-weight: 400;
                  line-height: normal;
                  text-transform: capitalize;
                  padding: 0 0 11px;
                  border-bottom: 1px solid rgba(0,0,0,.2);
                }
              }
            }
          }
        }
      }
    }
  }
  @media screen and (max-width: 1920px) {
    .fixed_alert{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      z-index: 999;
      display: flex;
      justify-content: flex-end;
      overflow: hidden;
      opacity: 0;
      pointer-events: none;
      transition: .6s;
      &.on{
        opacity: 1;
        pointer-events: auto;
        .content{
          transform: translateX(0);
        }
      }
      .mask_{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 0.5;
        background: #000;
      }
      .content{
        width: 1640/$f+vw;
        height: 100%;
        display: flex;
        justify-content: space-between;
        padding: 65/$f+vw 139/$f+vw 0 0;
        background: #EDEDED;
        position: relative;
        z-index: 4;
        transform: translateX(100%);
        transition: .6s;
        .l{
          .move{
            margin: 0 0 0 65/$f+vw;
            .back{
              width: 42/$f+vw;
              height: 42/$f+vw;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 50%;
              margin: 0 0 38/$f+vw;
              background: #D9D9D9;
              cursor: pointer;
              transition: .6s ease;
              &:hover{
                background: #2932E1;
                svg{
                  path{
                    fill: #fff;
                  }
                }
              }
              svg{
                width: 25/$f+vw;
                height: 25/$f+vw;
                path{
                  transition: .6s ease;

                }
              }
            }
            .title{
              color: #000;
              font-size: 64/$f+vw;
              font-style: normal;
              font-weight: 600;
              line-height: 60/$f+vw; /* 93.75% */
              text-transform: capitalize;
            }
            .pic{
              margin: 211/$f+vw 0 0 15/$f+vw;
              width: 503/$f+vw;
              img{
                width: 100%;
              }
            }
          }
          .position{
            width: 664/$f+vw;
            position: absolute;
            left: 0;
            bottom: -51/$f+vw;
          }
        }
        .r{
          width: 740/$f+vw;
          margin: 73/$f+vw 0 0 0;
          .jump{
            .index_con{
              .p1{
                color: #000;
                font-size: 26/$f+vw;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
                text-transform: capitalize;
                margin: 0 0 16/$f+vw;
              }
              .pick{
                color: #000;
                // text-align: justify;
                font-size: 18/$f+vw;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
                text-transform: capitalize;
              }
              .bottom{
                margin: 239/$f+vw 0 0 0;
                .p1{
                  color: #000;
                  font-size: 26/$f+vw;
                  font-style: normal;
                  font-weight: 400;
                  line-height: normal;
                  text-transform: capitalize;
                }
                .dis{
                  display: flex;
                  flex-wrap: wrap;
                  justify-content: space-between;
                  gap: 24/$f+vw 0;
                  .list{
                    width: 340/$f+vw;
                    color: #000;
                    font-size: 18/$f+vw;
                    font-style: normal;
                    font-weight: 400;
                    line-height: normal;
                    text-transform: capitalize;
                    padding: 0 0 11/$f+vw;
                    border-bottom: 1px solid rgba(0,0,0,.2);
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  @media screen and (max-width: 1024px) {
    overflow: hidden;
    .dialog {
      .close {
        top: 80px;

        img {
          width: 30px;
        }
      }

      .content {
        video {
          height: 60vh;
        }
      }
    }

    .banner{
      .text{
        left: 5%;
        bottom: 70px;
        .t1{
          font-size: 24px;
          margin-bottom: 20px;
        }
         .btn {
           width: 130px;
           height: 38px;
           font-size: 14px;
           border-radius: 50px;
           display: flex;
           align-items: center;
           justify-content: center;
           padding: 0;
        }
      }
    }

    .section1{
      padding: 50px 0 20px 0;

      .wrap{
        width: 90%;
        height: auto;
        padding: 70px 5% ;
        h1{
          font-size: 24px;
        }
        .p1{
          font-size: 16px;
          margin: 0 0 16px;
        }
        .p2{
          width: 100%;
          font-size: 13px;
          line-height: 25px;
        }
      }
    }

    .section2{
      padding: 35px 0;
      .title{
        font-size: 24px;
        margin: 0 0 25px;
      }
      .headline{
        width: 90%;
        font-size: 20px;
        margin: 0 auto 25px;
      }
      .content{
        width: 90%;
        height: auto;
        padding: 50px 5%;
        flex-direction: column;
        .img{
          width: 50%;
          height: auto;
          margin: auto;
        }
        .con_jump{
          margin: 50px 0 0 0;
          width: 100%;
          .button{
            width: 106%;
            img{
              width: 20px;
            }
          }
          .conSwiper{
            width: 90%;
            .swiper-wrapper{
              .swiper-slide{
                .matter{
                  &:not(:last-child) {
                    margin: 0 0 20px;
                  }
                  .p1{
                    font-size: 16px;
                    margin: 0 0 15px;
                  }
                  .dis{
                    gap: 10px 0;
                    &.top_screen{
                      .item{
                        width: 30%;
                        height:30px;
                        .it_line{
                          width: 100%;
                          height: 1px;
                        }
                        img{
                          width: 100%;
                          height: 30px;
                        }
                      }
                    }
                    .item{
                      width: 46%;
                      min-height: 30px;
                      font-size: 12px;
                      border-radius: 25px;
                    }
                  }
                }
              }
            }
          }
        }

      }
    }

    .section3{
      padding: 0 0 25px;
      margin: 0 5%;
      .title{
        font-size: 20px;
        margin: 0 0 25px;
      }
      .content{
        .keySwiper{
          width: 120%;
          .swiper-wrapper{
            .swiper-slide{
              height: auto;
              padding:  20px 0;
              border-radius: 15px;
              overflow: hidden;
              .img{
                height: auto;


              }
              .text{
                position: static;
                transform: translateY(0);
                margin: 15px 5% ;
                .p1{
                  font-size: 14px;
                  line-height: 20px;
                  margin: 0 0 10px;
                  height: 40px;
                }
                .more{
                  width: 130px;
                  height: 38px;
                  font-size: 14px;
                  border-radius: 50px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  padding: 0;
                  opacity: 1;
                }
              }
            }
          }
        }
        .swiper-pagination{
          height: 4px;
          margin: 25px 0 0 0;
        }
      }

    }

    .section4{
      padding: 25px 0;
      margin: 0 5%;
      .title{
        font-size: 20px;
        margin: 0 0 20px;
      }
      .content{
        width: 75%;
        height: 170px;
        border-radius: 15px;
        .play{
          width: 35px;
          height: 35px;
          svg{
            width: 14px;
            height: 14px;
          }
        }
      }
    }

    .section5{
      border-radius: 15px;
      padding: 35px 0;
      .title{
        font-size: 24px;
      }
      .content{
        margin: 35px 5%;
        flex-wrap: wrap;
        gap: 20px 0;
        .item{
          width: 47%;
          height: auto;
          border-radius: 15px;
          .position{
            left: 5%;
            bottom: 30px;
            .icon{
              width: 30px;
              height: 30px;
            }
            .text{
              margin: 10px 0 0 0;
              font-size: 16px;
              height: auto;
              line-height: 1.2;
            }
          }
        }
      }
    }

    .section6{
      padding: 35px 0;
      margin: 0 5%;
      .title{
        font-size: 24px;
        margin: 0 0 25px;
      }
      .content{
        .next{
          width: 30px;
          height: 30px;
          right: 0;
          svg{
            width: 20px;
            height: 20px;
          }
        }
        .techSwiper{
          .swiper-slide{
            .fist{
              flex-direction: column;
              padding: 0 0 20px;
              margin: 0 0 20px;
              .matter{
                width: 100%;
                &:not(:last-child) {
                  margin: 0 0 30px;
                }
                h1{
                  font-size: 16px;
                }
                .p1{
                  font-size: 13px;
                  margin: 0 0 15px;
                }
                table{
                  tr{
                    td{
                      height: 35px;
                      font-size: 12px;
                    }
                  }
                }
              }
            }
            .last{
              flex-direction: column;
              gap: 10px 0;
              .button{
                width: 100%;
                gap: 10px;
                .more{
                  width: fit-content;
                  height: 30px;
                  padding: 0 15px;
                  font-size: 12px;
                  white-space: nowrap;
                  border-radius: 30px;
                }
              }
            }
          }
        }

      }
    }

    .section7{
      padding: 24px 0 35px 0;
      margin: 0 5%;
      .content{
        flex-direction: column;
        height: auto;
        .img{
          height: auto;
          width: 100%;
          img{
            transform: scale(1.25) !important;
          }
        }
        .color{
          padding: 30px 5%;
          width: 100%;
          h1{
            font-size: 24px;
            line-height: 25px;
            margin: 0 0 25px;
          }
          .pick{
            font-size: 13px;
            margin: 0 0 25px;
          }
          .more{
            width: 130px;
            height: 38px;
            font-size: 14px;
            border-radius: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
          }
        }
      }
    }

    .section0{
      height: auto!important;
      padding: 50px 0 0 0;
      .fix{
        height: auto;
        .wrap{
          width: 90%;
          .button{
            display: none;
          }
          .title{
            font-size: 25px;
          }
          .content{
            width: 100%;
            flex-direction: column;
            transform: none!important;
            .item{
              flex-direction: column-reverse;
              &:not(:last-child) {
                margin: 0 0 50px;
              }
              .l{
                .tran{
                  margin: 0;
                  .p1{
                    font-size: 24px;
                    margin: 0 0 15px;
                  }
                  .pick{
                    font-size: 13px;
                    line-height: 27px;
                    width: 100%;

                  }
                }
              }
              .r{
                display: none;
              }
              .r2{
                display: block!important;
                margin: 0 0 20px;
                img{
                  width: 100%;
                }
              }
            }
          }
        }
      }
    }

    .fixed_alert{
      .content{
        width: 100%;
        padding: 100px 5%;
        flex-direction: column;
        .l{
          .move{
            margin: 0;
            .back{
              width: 35px;
              height: 35px;
              margin: 0 0 20px;
              svg{
                width: 20px;
                height: 20px;
              }
            }
            .title{
              font-size: 24px;
            }
          }
        }
        .r{
          width: 100%;
          position: relative;
          z-index: 5;
          .jump{
            .index_con{
              .p1{
                font-size: 24px;
              }
              .pick{
                font-size: 13px;
                line-height: 20px;
              }
              .bottom{
                margin: 50px 0 0 0;
                .p1{
                  font-size: 20px;
                }
                .dis{
                  gap: 10px 0;
                  .list{
                    width: 46%;
                    font-size: 14px;
                    padding: 0 0 20px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}